<template>
  <div class="book">
    <h1>用户管理</h1>
    <el-card>
      <el-table :data="showUserAll.rows" style="width: 100%" stripe max-height="730px">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="userimg" label="头像" width="70px">
          <template scope="scope">
            <el-avatar
              :src="
                scope.row.userimg
                  ? scope.row.userimg
                  : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
              "
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="账号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="昵称" show-overflow-tooltip>
          <template slot-scope="{ row }">
            {{ row.nickname || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱" show-overflow-tooltip>
          <template slot-scope="{ row }">
            {{ row.mail || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" show-overflow-tooltip>
          <template slot-scope="{ row }">
            {{ row.phone || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="{ row }">
            {{ row.sex || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="屏蔽">
          <template slot-scope="{ row }">
          <el-switch v-model="row.showorhide" @change="handleSwitchChange(row)"></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="showUserAll.count"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      //   用户列表
      tableList: [],
      queryInfo: {
        currentPage: 1, // 当前页码
        pagesize: 10, // 每页显示的行数
      },
      //   控制密码的展示与隐藏
      passwordVisibale: false,
      tableColumnPassword: "",
    };
  },
  created() {
    this.getUSerAll();
  },
  computed: {
    ...mapGetters(["showUserAll"]),
  },
  methods: {
    // 管理员 向数据库请求所有用户
    getUSerAll() {
      try {
        this.$store.dispatch("getUserAll", this.queryInfo);
      } catch (err) {
        err;
      }
    },
    // 每页展示数据条数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.$store.dispatch("getUserAll", this.queryInfo);
    },
    // 切换页码
    handleCurrentChange(newPage) {
      this.queryInfo.currentPage = newPage;
      this.$store.dispatch("getUserAll", this.queryInfo);
    },
    // 点击 switch 按钮
    handleSwitchChange(e){
      console.log(e.id)
      
    },
  },
};
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 20px;
  .el-table {
    max-height: 75vh;
    overflow: auto;
  }
  .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .el-table {
    .el-icon-view {
      cursor: pointer;
    }
  }
}
</style>